<template>
  <div class="wallet">
    <x-header>
      <button-tab class="header-tab">
        <button-tab-item selected @on-item-click="consumeTypeChange">充值记录</button-tab-item>
        <button-tab-item @on-item-click="consumeTypeChange">消费记录</button-tab-item>
      </button-tab>
    </x-header>
    <!--<tab>-->
      <!--<tab-item selected>预录</tab-item>-->
      <!--<tab-item>其他</tab-item>-->
    <!--</tab>-->
    <div class="list-wrapper">
      <div v-for="(item, index) in list" :key="index" class="card">
        <div>充值金额：{{item.rechargeSum}}￥</div>
        <div>充值时间：{{item.createTime}}</div>
      </div>
      <load-more :show-loading="false" :tip="loadMoreTip"></load-more>
    </div>
  </div>
</template>

<script>
import {
  XHeader,
  ButtonTab,
  ButtonTabItem,
  Tab,
  TabItem,
  Box,
  LoadMore
} from 'vux'
import {
  preRecord
} from '../../api/api'
export default {
  name: 'wallet',
  components: {
    XHeader,
    ButtonTab,
    ButtonTabItem,
    Tab,
    TabItem,
    Box,
    LoadMore
  },
  data () {
    return {
      consumeType: 0,
      loadMoreTip: '正在加载',
      list: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    consumeTypeChange (index) {
      this.consumeType = index
      this.getList()
    },
    getList () {
      this.loadMoreTip = '正在加载'
      preRecord({
        consumeType: this.consumeType
      }).then(res => {
        if (res.status === 200) {
          const data = res.data
          if (data.length === 0) {
            this.loadMoreTip = '暂无数据'
          } else {
            this.loadMoreTip = '已加载全部'
          }
          this.list = res.data
        } else {
          this.$vux.toast.show(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="less">
  .wallet{

    .header-tab{
      margin-top: 5px;
    }
    .vux-tab-wrap{
      padding-top: 36px;
      .vux-tab{
        height: 36px;
        .vux-tab-item{
          line-height: 36px;
        }
      }
    }
    .list-wrapper{
      padding: 10px;
      position: absolute;
      top: 46px;
      right: 0;
      bottom: 0;
      left: 0;
      overflow-y: auto;
      background: #e6e6e6;
      font-size: 13px;
    }
    .card{
      background: #ffffff;
      padding: 10px;
      border-radius: 5px;
    }
  }
</style>
